<template>
	<view>
		<view class="box">
			<view class="titlename"><text class="redcolor">*</text>入驻类型</view>
			
			<view class="con between" @click="selectServ">
				<view class="classMore">
					
					<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
						
						
							<!-- <view class="uni-input">{{array[index]}}</view> -->
							<view class="many" v-for="(item,index) in serv_list" v-show="choose_id_list.indexOf(item.serv_id)>=0">
								<view class="big">
									<view class="manyName">{{item.serv_name}}</view>
									<image src="../../../static/images/cc/close.png" @click.stop="unchoose(item.serv_id)" mode="widthFix" class="manyImg" />
								</view>
							</view>

					</scroll-view>
					
				</view>
				<image src="../../../static/images/cc/right.png" mode="widthFix" class="rimg" />
			</view>
			
			<view class="titlename"><text class="redcolor">*</text>姓名</view>
			<view class="con">
				<input type="text" v-model="user_name" placeholder="请输入联系人姓名" placeholder-class="name" />
			</view>
			<view class="titlename"><text class="redcolor">*</text>性别</view>
			<view class="con">
				<view class="more" @tap="changeSex">
					<image :src="sex_enum==1?'../../../static/images/cc/s1.png':'../../../static/images/cc/s2.png'"
						mode="widthFix" class="limg" />
					<view class="name colorGrey">男</view>
				</view>
				<view class="more" @tap="changeSex">
					<image :src="sex_enum==2?'../../../static/images/cc/s1.png':'../../../static/images/cc/s2.png'"
						mode="widthFix" class="limg" />
					<view class="name colorGrey">女</view>
				</view>
			</view>
			<view class="titlename"><text class="redcolor">*</text>出生日期</view>
			
			
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="con between">
					<view class="name">{{''!=birth?birth:'请选择您的出生日期'}}</view>
					<image src="../../../static/images/cc/right.png" mode="widthFix" class="rimg" />
				</view>
			</picker>
			<view class="titlename"><text class="redcolor">*</text>联系电话</view>
			<view class="con">
				<input type="number" v-model="user_phone" placeholder="请输入联系人的电话方便服务人员联系" placeholder-class="name" />
			</view>
			<view class="titlename"><text class="redcolor">*</text>身份证正面</view>
			<view class="cond" @click="chooseImage('card_1_image')">
				<view class="imgList">
					<image v-if="''!=img.card_1_image" :src="img.card_1_image" mode="widthFix" class="upload" />
					<image v-else src="../../../static/images/cc/upload.png" mode="widthFix" class="upload" />
				</view>
			</view>
			<view class="titlename"><text class="redcolor">*</text>身份证背面</view>
			<view class="cond" @click="chooseImage('card_2_image')">
				<view class="imgList">
					<image v-if="''!=img.card_2_image" :src="img.card_2_image" mode="widthFix" class="upload" />
					<image v-else src="../../../static/images/cc/upload.png" mode="widthFix" class="upload" />
				</view>
			</view>
			<view class="titlename"><text class="redcolor">*</text>手持身份证照片</view>
			<view class="cond border0" @click="chooseImage('card_3_image')">
				<view class="imgList">
					<image v-if="''!=img.card_3_image" :src="img.card_3_image" mode="widthFix" class="upload" />
					<image v-else src="../../../static/images/cc/upload.png" mode="widthFix" class="upload" />
				</view>
			</view>
		</view>
		<view v-show="can_submit" class="bottom" @click="occupancy">
			<view class="next">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serv_list:[],
				choose_id_list:[],
				user_name:'',
				user_phone:'',
				sex_enum:1,// 1nan 2nv
				birth:'',
				index: 0,
				img:{
					card_1_image:'',
					card_2_image:'',
					card_3_image:''
				},
				img_data:{
					card_1_image:'',
					card_2_image:'',
					card_3_image:''
				},
				is_submit:false,
				can_submit:false
			}
		},
		onLoad(){
			this.loadServ();
			this.checkStatus();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			changeSex(){
				this.sex_enum=1==this.sex_enum?2:1;
			},
			bindDateChange: function(e) {
				this.birth = e.detail.value
			},
			async occupancy(){
				if(this.is_submit){
					return;
				}
				
				this.is_submit = true;
				uni.showLoading({
					title: '加载中'
				});
				// 获取列表
				await uni.request({
					url: '/dispatch/server/occupancy',
					data: {
						serv_ids:this.choose_id_list,
						user_name:this.user_name,
						sex_enum:this.sex_enum,// 1nan 2nv
						birth:this.birth,
						user_phone:this.user_phone,
						card_1_image:this.img_data.card_1_image,
						card_2_image:this.img_data.card_2_image,
						card_3_image:this.img_data.card_3_image
					},
					method:"POST",
					success: res => {
						// this.serv_list = res.data;
						// this.order_init.serv_id=this.serv_list[0].serv_id;
						console.log(res);
						setTimeout(()=>{
							if(getCurrentPages().length>1){
								uni.navigateBack();
							}else{
								uni.redirectTo({
									url: '/pages/user/user'
								});
							}
						},500);
						
					},
					complete:()=>{
						uni.hideLoading();
						this.is_submit = false;
					}
				});	
			},
			uploadFile(file,column) {
				var that =this;
				uni.request({
					url: '/wanlshop/common/uploadData',
					success: updata => {
						uni.uploadFile({
							url: updata.data.uploadurl,
							filePath: file,
							name: 'file',
							formData: updata.data.storage == 'local' ? null : updata.data.multipart,
							success: res => {
								// JSON.parse(res.data).data.url
								// JSON.parse(res.data).data.fullurl
								that.img[column] = JSON.parse(res.data).data.fullurl;
								that.img_data[column] = JSON.parse(res.data).data.url;
							},
							fail: error => {
								this.$wanlshop.msg(JSON.parse(error.data).msg);
							}
						});
					}
				});
			},
			chooseImage(column) {
				var that = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						// 设置url的值，显示控件
						// this.url = ;
						// console.log(res.tempFilePaths[0])
						that.uploadFile(res.tempFilePaths[0],column)
					}
				});
			},
			unchoose(serv_id){
				var index = this.choose_id_list.indexOf(serv_id);
				if(index>-1){
					this.choose_id_list.splice(index,1)
				}
				
			},
			selectServ(){
				var that = this;
				var tmpName = [];
				var tmpId = [];
				this.serv_list.forEach(obj => {
					tmpName.push(obj.serv_name);
					tmpId.push(obj.serv_id);
				});
				uni.showActionSheet({
					itemList: tmpName,
					success: function (res) {
						console.log('用户选择了第' + res.tapIndex + '个选项');
						if(that.choose_id_list.indexOf(tmpId[res.tapIndex]) === -1){
							that.choose_id_list.push(tmpId[res.tapIndex]);
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			async loadServ() {
				// 获取列表
				await uni.request({
					url: '/dispatch/home/getServ',
					data: {
						serv_enum: 0,//全部数据
					},
					success: res => {
						this.serv_list = res.data;
					}
				});
			},
			
			async checkStatus() {
				// 获取列表
				await uni.request({
					url: '/dispatch/server/getStatus',
					data: {
					
					},
					success: res => {
						console.log(res);
						// 'pending', 'approved', 'rejected'
						if('pending'==res.data){
							this.can_submit = false;
							uni.showToast({
								title:"等待审核中"
							})
						}
						if('approved'==res.data){
							this.can_submit = false;
							uni.showToast({
								title:"审核已通过"
							})
						}
						if(''==res.data){
							this.can_submit = true;
						}
						if('rejected'==res.data){
							this.can_submit = true;
							uni.showToast({
								title:"请重新入驻"
							})
						}
						
						
						// this.serv_list = res.data;
					}
				});
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.next {
		width: 676rpx;
		height: 82rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #84BD00;
		color: #ffffff;
		border-radius: 50rpx;
		font-size: 32rpx;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}

	.rimg {
		width: 18rpx;
	}

	.box {
		width: 750rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.titlename {
		width: 678rpx;
		margin-left: 36rpx;
		font-size: 30rpx;
		color: #3D3D3D;
		margin-top: 30rpx;
	}

	.redcolor {
		color: #FF0000;
	}

	.con {
		width: 678rpx;
		height: 120rpx;
		margin-left: 36rpx;
		display: flex;

		align-items: center;
		border-bottom: 1px solid #D8D8D8;
	}

	.cond {
		width: 678rpx;
		margin-left: 36rpx;
		display: flex;
		padding: 40rpx 0;
		align-items: center;
		border-bottom: 1px solid #D8D8D8;
	}

	.imgList {
		display: flex;
	}

	.upload {
		width: 170rpx;
		height: 170rpx;
	}

	.between {
		justify-content: space-between;
	}

	.name {
		font-size: 30rpx;
		color: #999999;
	}

	.color {
		color: #84BD00;
	}

	.limg {
		width: 44rpx;
		height: 44rpx;
	}

	.border0 {
		border: 0;
	}

	input {
		color: #84BD00;
		font-size: 30rpx;
		width: 100%;
	}

	.bottom {
		width: 750rpx;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.more {
		display: flex;
		align-items: center;
		margin-right: 100rpx;
	}

	.colorGrey {
		color: #333333;
	}

	.limg {
		width: 30rpx;
		height: 30rpx;
		margin-right: 12rpx;
	}

	.classMore {
		width: 630rpx;
	}

	.many {
		width: 162rpx;
		background: rgba(232, 55, 41, 0.1);
		height: 58rpx;
		border-radius: 50rpx;
		margin-right: 12rpx;
		display: inline-block;
	}

	.big {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 58rpx;
	}

	.manyName {
		font-size: 26rpx;
		color: #84BD00;
		margin-right: 12rpx;
	}

	.manyImg {
		width: 30rpx;
		height: 30rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.scroll-view-item {
		height: 300rpx;
	}

	.scroll-view-item_H {

		width: 100%;
		height: 300rpx;
	}
</style>